<!-- 
<template>
	<div>
	  <div id="video-container">
		<video ref="videoElement" controls></video>
	  </div>
	</div>
  </template>
  <script>
  import { getAction } from '../../api/manage'
  import { postAction } from '../../api/manage'
  
  export default {
	data() {
	  return {
		videourl: '',
		url1: "/yzd_zaikuguanli/yzdZaikuguanlimingxi/getHlsUrl",
	  }
	},
	mounted() {
	  const script = document.createElement("script");
	  script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
	  script.onload = () => {
        this.initHls();
	  };
	  script.onerror = () => {
		console.error("Failed to load Hls.js");
	  };
	  document.head.appendChild(script);
  
	  this.getHlsurl();
	},
	methods: {
	  getHlsurl() {
		getAction(this.url1)
		  .then(res => {
			console.log(res);
			this.videourl = res.result.data.lives[0].streams[0].hls;
			console.log("1212121", this.videourl);
            this.initHls();
		  })
		  .catch(err => {
			console.error("Failed to get HLS video URL", err);
		  });
	  },
	  initHls() {
		var videoElement = this.$refs.videoElement;
  
		if (Hls.isSupported()) {
		  var hls = new Hls();
		  hls.loadSource(this.videourl);
		  hls.attachMedia(videoElement);
		  hls.on(Hls.Events.MANIFEST_PARSED, function() {
			videoElement.play().catch(() => {
			  videoElement.muted = true;
			  videoElement.play();
			});
		  });
		} else if (videoElement.canPlayType("application/x-mpegURL")) {
		  videoElement.src = this.videourl;
		  videoElement.addEventListener("loadedmetadata", function() {
			videoElement.play();
		  });
		}
	  },
	},
  };
  </script>
  
  <style>
  #video-container {
	width: 100%;
	height: auto;
	margin: 0 auto;
  }
  </style> -->
  <template>
	<video
      id="my-video"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
      width="1000px"
    >
      <source
        :src=videourl
        type="application/x-mpegURL"
      />
    </video>
  </template>

  <script>
  import "video.js/dist/video-js.css";
	import videojs from "video.js";
	import "videojs-contrib-hls";
  	import { getAction } from "../../api/manage";
	  export default {
		data () {
			return {
				videourl: '',
				url1: "/yzd_zaikuguanli/yzdZaikuguanlimingxi/getHlsUrl",

			}
		},
		methods: {
			getVideo() {
      			videojs(
        			"my-video",
       			 {
         			 bigPlayButton: false,
        			 textTrackDisplay: false,
        			 posterImage: true,
        			 errorDisplay: false,
      			    controlBar: true,
      			  },
       			 function () {
          			this.play();
       			 }
      			);
			},
			getHlsurl() {
				getAction(this.url1).then(res => {
					console.log(res);
					this.videourl = res.result.data.lives[0].streams[0].hls;
					console.log("1212121", this.videourl);
		  		})
				}
		},

		created() {
			this.getHlsurl();
		},
		mounted() {
			
    		let _that = this;
    		setTimeout(() => {
      		_that.getVideo();
    		}, 6000);
  		},
	  }
</script>

<style>

</style>